<ion-view title="销售业绩排名">
    <slide-tab tabs="data.periodArray" start="1" display-field="name" css-class="tabs-top tabs-rank"  on-tab-select="onTabSelected(index)"></slide-tab>
    <ion-header-bar class="bar-subheader rank-subheader">
        <label class="item item-input search">
            <i class="icon ion-ios-search-strong placeholder-icon"></i>
            <input type="text" placeholder="姓名" ng-model="data.searchName">
            <i class="icon ion-android-close placeholder-icon" ng-show="data.searchName" on-tap="clearSearch()"></i>
        </label>
        <ion-item class="item-thumbnail-left user-info">
            <img ng-src="{{data.current.photo || 'img/default-avatar.png'}}">
            <div ng-if="data.current">
                <p class="name">{{data.current.name}}</p>
                <p class="rank">业绩排名：<span>{{data.current.rank}}</span></p>
                <p class="performance">
                    销售业绩：
                    <performance-num num="data.current.num" symbol="data.current.symbol" trend="data.current.trend" class="num-style">
                    </performance-num>
                </p>
                <p class="tips">你击败了<span>{{data.current.fight}}%</span>的对手！</p>
            </div>
            <div ng-messages="data.error" class="error-message">
                <div ng-message="failed">获取排名信息失败</div>
                <div ng-message="empty">没有排名信息</div>
            </div>
        </ion-item>
    </ion-header-bar>
    <ion-content class="rank-content" has-bouncing="true">
        <ion-list class="pref-list">
            <ion-item ng-repeat="pref in data.performances | filter:{name:data.searchName}  | limitTo:data.displayNum" ng-click="resetPref(pref.id)">
                <label ng-switch="pref.rank" class="pref-rank">
                    <img ng-switch-when="1" src="img/icon-gold-medal.png">
                    <img ng-switch-when="2" src="img/icon-silver-medal.png">
                    <img ng-switch-when="3" src="img/icon-bronze-medal.png">
                    <span ng-switch-default>{{pref.rank}}</span>
                </label>
                <img ng-src="{{pref.photo || 'img/default-avatar.png'}}">
                <span>{{pref.name}}</span>
                <performance-num num="pref.num" symbol="pref.symbol" trend="pref.trend" class="pref-tips"></performance-num>
            </ion-item>
        </ion-list>
        <ion-infinite-scroll on-infinite="loadMore()" ng-if="!data.noMoreData" icon="ion-loading-c" distance="1%"></ion-infinite-scroll>
    </ion-content>
</ion-view>